<template>
  <div class="channelEdit">
    <!-- 我的频道 -->
    <van-cell :border="false" title="我的频道">
      <van-button @click="isShowEdit = !isShowEdit" class="edit_btn" plain round size="small" type="danger">
        {{ isShowEdit ? '完成' : '编辑' }}</van-button>
    </van-cell>
    <van-grid :gutter="10" class="my_channel">
      <!-- v-bind:class语法：一个对象，对象中的key表示要作用的css类名
                                 对象中的value 要计算出的布尔值
                                 true： 则作用改类名
                                 false： 不作用类名 -->
      <van-grid-item
      @click="onMyChannel(index)"
      icon="close"
      class="channel_item"
      v-for="(channel, index) in myChannels"
      :key="channel.id"
      :text="channel.name"
      :class="index === active ? 'active' : ''"
      >
        <van-icon v-show="isShowEdit && index !== 0" slot="icon" name="close" />
      </van-grid-item>
    </van-grid>
    <!-- 频道推荐 -->
    <van-cell :border="false" title="频道推荐">
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
      @click="onAddChannels(channel)"
      class="recommend_channel"
      icon="plus"
      v-for="(channel, value) in recommendChannels"
      :key="value"
      :text="channel.name"
      ></van-grid-item>
    </van-grid>
  </div>
</template>
<script>
import { getAllChannels, addUserChannel, deleteUserChannel } from '@/api/channels'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'
export default {
  name: 'channelEdit',
  data () {
    return {
      AllChannels: [],
      isShowEdit: false
    }
  },
  props: {
    myChannels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  created () {
    this.loadGetChannels()
  },
  computed: {
    // 获取vuex中的user
    ...mapState(['user']),
    // 计算属性会观测内部依赖数据的变化，如果依赖的数据发送变化，则计算属性会重新执行
    recommendChannels () {
      // 直接返回filter过滤之后的数组
      return this.AllChannels.filter(item => {
        // this.myChannels.find: 有俩个值
        // 如果通过find找到了这一项，返回值就是找到的这一项
        // 如果通过find没有找到这一项，返回值：undefined
        return !this.myChannels.find(myChannel => {
          return myChannel.id === item.id
        })
      })
    }
  },
  methods: {
    async loadGetChannels () {
      try {
        const { data: res } = await getAllChannels()
        this.AllChannels = res.data.channels
      } catch (err) {
        this.$tiast.fail('获取失败')
      }
    },
    // 点击推荐频道进行添加
    async onAddChannels (item) {
      this.myChannels.push(item)
      // 数据持久化
      if (this.user) {
        // 1已登录，存储到数据库
        try {
          await addUserChannel({
            id: item.id, // 频道id
            seq: this.myChannels.length // 序号
          })
        } catch (err) {
          this.$toast('保存失败，请稍候重试')
        }
      } else {
        // 2，未登录：存储到本地
        setItem('hmtt_channels', this.myChannels)
      }
    },
    onMyChannel (index) {
      if (this.isShowEdit) {
        if (index === 0) return
        // 删除 编辑状态，执行删除频道
        // 参数1，要删除的元素开始索引
        // 参数2: 删除的个数，如果不指定则从参数1开始删除一直删除
        if (index <= this.active) {
          // 让激活频道的索引减一
          this.$emit('updateActive', this.active - 1, true)
        }
        // 删除
        const id = this.myChannels[index].id
        this.myChannels.splice(index, 1)
        // 持久化
        this.deleteChannels(id)
      } else {
        // 切换
        // 子向父传值，通过$emit()
        // 1自定义事件：定义在当前组件的标签上 2传递的数据
        this.$emit('updateActive', index, false)
      }
    },
    async deleteChannels (id) {
      if (this.user) {
        // 已登录，则将数据更新到线上
        try {
          deleteUserChannel(id)
        } catch (err) {
          this.$toast.fail('删除失败')
        }
      } else {
        // 未登录，将数据更新到本地
        setItem('hmtt_channels', this.myChannels)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.channelEdit {
  padding-top: 80px;
  .edit_btn {
    width: 104px;
    height: 48px;
    border-radius: 30px;
    color: #f85959;
  }
  /deep/.my_channel {
    .van-grid-item__icon-wrapper {
      position: unset;
      .van-grid-item__text {
        font-size: 12px;
      }
    }
    .van-icon-close {
      position: absolute;
      font-size: 36px;
      top: -13px;
      right: -13px;
    }
    .van-grid-item__text {
      margin-top: 0px;
    }
  }
  /deep/.channel_item {
    .van-grid-item__content {
      background-color: #f3f5f5;
      width: 160px;
      height: 86px;
      border-radius: 6px;
      border: none;
      .van-grid-item__text {
        font-size: 28px;
        color: #212121;
      }
    }
    .van-grid-item__content::after {
      border-width: 0;
      border: none;
    }
  }
  /deep/.recommend_channel {
    .van-grid-item__content {
      flex-direction: row;
      .van-icon-plus {
        font-size: 24px;
        color: #333;
      }
      .van-grid-item__text {
        margin-top: 8px;
        margin-left: 5px;
      }
    }
  }
  /deep/.active {
    .van-grid-item__text {
      color: red !important;
    }
  }
}
</style>
